<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>{$data.post_title}</title>
    <link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css"/>
    <style>
      /* .main-title {
        border-left: 4px solid #071a44;
        color: #071a44;
        padding-left: 6px;
        line-height: normal;
      } */
      .h1 {
        font-size: 22px !important;
        line-height: 1.4;
        margin-bottom: 14px !important;
      }
      .desc {
        color: #999;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
        padding-bottom: 4px;
        font-size: 14px;
      }
      .center {
        text-align: center;
      }
      .img {
        max-width: 100%;
        height: auto;
      }
      .video {
        width: 100%;
        height: auto;
      }
      .icon-box {
        text-align: center;
        padding: 20px;
      }
      .iframe {
        border: none;
        width: 100%;
      }
      .notice {
        text-align: center;
        background-color: #e6f7ff;
        color: #444;
        padding: 8px;
      }
      .red-packet {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        text-align: center;
      }
      .redpack {
        height: 450px;
        position: absolute;
        top: 50%;
        left: 50%;
        background: #A5423A;
        width: 300px;
        border-radius: 10px;
        margin-top: -225px;
        margin-left: -150px;
      }
      .topcontent {
          height: 300px;
          border: 1px solid #BD503A;
          background-color: #BD503A;
          border-radius: 10px 10px 50% 50% / 10px 10px 15% 15%;
          box-shadow: 0px 4px 0px -1px rgba(0,0,0,0.2);
      }
      #redpack-open {
          width: 100px;
          height: 100px;
          border: 1px solid #FFA73A;
          background-color: #FFA73A;
          border-radius: 50%;
          color: #fff;
          font-size: 50px;
          display: block;
          margin: -50px auto 0 auto;
          box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.2);
          text-align: center;
          color: #000;
          line-height: 100px;
          cursor: pointer;
      }
      .topcontent h2 {
        font-weight: normal;
        color: rgb(254,206,156);
      }
      .topcontent h4 {
        font-weight: normal;
        color: rgb(255, 243, 230);
      }
      .avatar {
        padding: 4px;
        border-radius: 6px;
        background-color: #fff;
        width: 80px;
        height: 80px;
        margin: 40px auto 20px auto;
      }
      .avatar img {
        width: 80px;
        height: auto;
      }
      .hidden {
        display: none;
      }
      .rotate {
          -webkit-animation-name: spinner; 
          -webkit-animation-timing-function: linear; 
          -webkit-animation-iteration-count: infinite; 
          -webkit-animation-duration: 2s; 
          animation-name: spinner; 
          animation-timing-function: linear; 
          animation-iteration-count: infinite; 
          animation-duration: 2s; 
          -webkit-transform-style: preserve-3d; 
          -moz-transform-style: preserve-3d; 
          -ms-transform-style: preserve-3d; 
          transform-style: preserve-3d;
      }
      /* WebKit and Opera browsers */ 
      @-webkit-keyframes spinner { 
      from 
        { 
          -webkit-transform: rotateY(0deg); 
        } 
        to { 
          -webkit-transform: rotateY(-360deg); 
        } 
      } /* all other browsers */ 
      @keyframes spinner { 
        from { 
          -moz-transform: rotateY(0deg); 
          -ms-transform: rotateY(0deg); 
          transform: rotateY(0deg); 
        } 
        to 
        { 
          -moz-transform: rotateY(-360deg); 
          -ms-transform: rotateY(-360deg); 
          transform: rotateY(-360deg); 
        } 
      }
    </style>
  </head>
  <body>
    <notempty name="data.post_id">
    <eq name="preview" value="1">
    <div class="notice"><i class="weui-icon-info-circle"></i> 点击微信右上角菜单进行分享</div>
    </eq>
    <eq name="data.post_type" value="0">
      <div class="red-packet">
        <div class="redpack">
          <div class="topcontent">
            <div class="avatar">
              <img src="/track/Tpl/Index/wechat.jpg" />
            </div>
            <h2>获得一个定时红包</h2>
            <h4 id="redpacket-msg-ticking">下一个红包将于 <span class="countdown">60</span> 秒后发放</h4>
            <h4 id="redpacket-msg-ok" class="hidden">点击领取</h4>
          </div>
          <div id="redpack-open"><span class="countdown open-text">60</span></div>
        </div>
      </div>
    <else />
    <article class="weui-article">
        <h1 class="main-title h1">{$data.post_body_title}</h1>
        <p class="desc">发布时间：{$data.post_created_time}</p>
        <!-- <section> -->
          <!-- <h2 class="title main-title">{$data.post_subtitle}</h2> -->
          <section>
            <p class="center">
              <eq name="data.post_type" value="1">
                <notempty name="data.post_video_poster">
                  <video class="video" src="{$data.post_file_url_full}" poster="{$data.post_video_poster}" controls autoplay />
                  <else/>
                  <video class="video" src="{$data.post_file_url_full}" controls autoplay />
                </notempty>
              </eq>
              <eq name="data.post_type" value="2">
                <notempty name="data.post_file_url_html">
                <iframe class="iframe" src="{$data.post_file_url_html}" onload="setIframeHeight(this)" ></iframe>
                <else/>
                <div class="icon-box">
                  <i class="weui-icon-warn weui-icon_msg-primary"></i>
                  <div class="icon-box__ctn">
                    <h3 class="icon-box__title">文件内容解析失败</h3>
                  </div>
                </div>
                </notempty>
              </eq>
              <eq name="data.post_type" value="3">
                <img class="img" src="{$data.post_file_url_full}" alt="文章图片">
              </eq>
            </p>
            <!-- <h2 class="title main-title">{$data.post_body_title}</h2> -->
            <p>{$data.post_body_desc}</p>
          </section>
        <!-- </section> -->
      </article>
    </eq>
    <else/>
    <div class="icon-box">
      <i class="weui-icon-warn weui-icon_msg"></i>
      <div class="icon-box__ctn">
        <h3 class="icon-box__title">内容不存在</h3>
        <p class="icon-box__desc">您查看的文章不存在</p>
      </div>
    </div>
    </notempty>
    <!-- <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
      <div class="weui-media-box__hd">
        <img class="weui-media-box__thumb" src="{$avatar}" alt="avatar">
      </div>
      <div class="weui-media-box__bd">
        <h4 class="weui-media-box__title">{$nickname}</h4>
        <p class="weui-media-box__desc">当前读者</p>
      </div>
    </a> -->
  </body>
  <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="//webapi.amap.com/maps?v=1.4.10&key=b3d7e7bb583bf65f14ef2de8a2e4b91b"></script>
  <script>
    function setIframeHeight(iframe) {
      if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
          iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
          iframe.style.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
        }
      }
    };
    wx.config({
        debug: false,
        appId: '{$signPackage.appId}', // 必填，公众号的唯一标识
        timestamp: {$signPackage.timestamp}, // 必填，生成签名的时间戳
        nonceStr: '{$signPackage.nonceStr}', // 必填，生成签名的随机串
        signature: '{$signPackage.signature}',// 必填，签名
        jsApiList: ['checkJsApi', 'getLocation', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
    });

    if (!"geolocation" in navigator) {
      alert('地理位置服务不可用，请升级浏览器');
      location.reload();
    }

    const geo_options = {
      enableHighAccuracy: true,
      timeout: 10000
    };
    
    var redpacketTimer = null;
    var timeLeft = 60;
    function startRedPacketTimer() {
      if(redpacketTimer) {
        clearInterval(redpacketTimer);
        redpacketTimer = null;
      }
      timeLeft = 60;
      $('.countdown').text(timeLeft);
      $('#redpacket-msg-ok').hide();
      $('#redpacket-msg-ticking').show();

      redpacketTimer = setInterval(function () {
        timeLeft -= 1;
        if(timeLeft > 0) {
          $('.countdown').text(timeLeft);
        } else {
          $('#redpacket-msg-ok').show();
          $('#redpacket-msg-ticking').hide();
          $('.open-text').text('開');
          clearInterval(redpacketTimer);
          redpacketTimer = null;
        } 
      }, 1000);
    }
    var loadingRedPacket = false;
    function getRedPacket() {
      if(timeLeft > 0 || loadingRedPacket) return;
      loadingRedPacket = true;
      $('#redpack-open').addClass('rotate');
      $.post('/track/index.php/Track/redpacket', {
        post_id: '{$data.post_id}',
        user_openid: '{$openid}',
        user_username: '{$nickname}',
        user_avatar: '{$avatar}'
      }, function(ret) {
        loadingRedPacket = false;
        $('#redpack-open').removeClass('rotate');
        if(ret.status === 1) {
          alert(ret.info);
          startRedPacketTimer();
        } else {
          alert(ret.info);
        }
      });
    }

    var postType = '{$data.post_type}';
    if(postType === '0') {
      startRedPacketTimer();
      $('#redpack-open').click(function() {
        getRedPacket();
      });
    }

    function webGetLocation() {
      navigator.geolocation.getCurrentPosition(function(position) {
        track(position.coords.latitude, position.coords.longitude);
      }, function(error) {
        if (error.message.indexOf('denied') >= 0) {
          alert('授权后才可查看文章内容哦');
          // location.reload();
        }
      }, geo_options);
      navigator.geolocation.watchPosition(function(position) {
        track(position.coords.latitude, position.coords.longitude);
      }, function(error) {
      }, geo_options);
    }

    function getLocation() {
      wx.getLocation({
        type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: function (res) {
          var latitude = res.latitude;
          var longitude = res.longitude;
          track(latitude || 0, longitude || 0, true);
        },
        fail: function (res) {
          console.log('reject location');
          alert('位置授权后才可查看文章内容哦');
          // location.reload();
        }
      });
    }

    var first = '1';

    function track(latitude, longitude, isWechat) {
      var lnglat = [longitude, latitude];
      if(!geocoder) {
        setTimeout(() => {
          track(latitude, longitude, isWechat);
        }, 1000);
        return;
      } 
      geocoder.getAddress(lnglat, function(status, result) {
        if (status === 'complete' && result.info === 'OK' && result.regeocode) {
          $.post('/track/index.php/Track/create', {
            log_post_id: '{$data.post_id}',
            log_user_openid: '{$openid}',
            log_username: '{$nickname}',
            log_avatar: '{$avatar}',
            log_position: JSON.stringify(lnglat),
            log_location: result.regeocode.formattedAddress,
            first: first
          }, function() {
            first = '2';
            if(isWechat) {
              setTimeout(function () {
                getLocation();
              }, 20 * 1000);
            }
          });
        }
      });
    }

    const url = window.location.href.replace('?preview=1','').split('?')[0];

    var title = "{$data.post_title}";
    var desc = "{$data.post_subtitle}";
    var imgUrl = "{$data.post_thumb_url_full}";
    
    wx.ready(function () {
      wx.onMenuShareAppMessage({
        title: title, // 分享标题
        desc: desc, // 分享描述
        link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: imgUrl // 分享图标
        // trigger: function (res) {
        //     alert('用户点击发送给朋友');
        // },
        // success: function (res) {
        //     alert('已分享');
        // },
        // cancel: function (res) {
        //     alert('已取消');
        // },
        // fail: function (res) {
        //     alert(JSON.stringify(res));
        // }
      });

      wx.onMenuShareTimeline({
        title: title, // 分享标题
        link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: imgUrl, // 分享图标
        success: function () {
        // 用户点击了分享后执行的回调函数
        }
      });


      var isPreview = '{$preview}' === '1';
      if(!isPreview) {
        getLocation();
      } 

      // wx.checkJsApi({
      //   jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
      //   success: function(res) {
      //     if(res.checkResult) {
      //       var result = JSON.parse(res.checkResult);
      //       if(!result.updateAppMessageShareData) {
      //         wx.onMenuShareAppMessage({
      //           title: '{$data.post_title}', // 分享标题
      //           desc: '{$data.post_subtitle}', // 分享描述
      //           link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      //           imgUrl: '{$data.post_thumb_url_full}', // 分享图标
      //           success: function () {
      //           // 用户点击了分享后执行的回调函数
      //           }
      //         });
      //       }
      //       if(!result.updateTimelineShareData) {
      //         wx.onMenuShareTimeline({
      //           title: '{$data.post_title}', // 分享标题
      //           link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      //           imgUrl: '{$data.post_thumb_url_full}', // 分享图标
      //           success: function () {
      //           // 用户点击了分享后执行的回调函数
      //           }
      //         });
      //       }
      //     }
      //   }
      // });

      // wx.updateAppMessageShareData({ 
      //   title: '{$data.post_title}', // 分享标题
      //   desc: '{$data.post_subtitle}', // 分享描述
      //   link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      //   imgUrl: '{$data.post_thumb_url_full}', // 分享图标
      // }, function(res) { 
      //   alert('分享成功'); 
      // });

      // wx.updateTimelineShareData({ 
      //   title: '{$data.post_title}', // 分享标题
      //   link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      //   imgUrl: '{$data.post_thumb_url_full}', // 分享图标
      // }, function(res) { 
      //   alert('分享成功'); 
      // });
    });
    
    var geocoder;
    AMap.plugin('AMap.Geocoder', function() {
      geocoder = new AMap.Geocoder({});
    });
  </script>
</html>